<!DOCTYPE html>
<html>
<head>
    <script>
        function displayPopup() {
            if (confirm('温馨提示：请先登录哦！')) {
                window.location.href = '/login';
            }
        }
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>一对一辅导 - 星火编舟</title>
    <link rel="icon" type="image/png" href="../static/images/网页头_logo星火编舟.png">
    <link rel="stylesheet" type="text/css" href="../static/css/index.css">
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/icon/iconfont.css">
    <!-- 添加 Font Awesome CDN 链接 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
 #answerArea {
    width: 100%; /* 调整宽度为80%，您可以根据需要调整这个值 */
    max-width: 800px; /* 设置最大宽度，防止在大屏幕上过宽 */
    min-height: 800px; /* 设置最小高度，确保内容有足够的空间显示 */
    margin: 20px auto; /* 从顶部和底部添加一些边距，并水平居中 */
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    overflow: auto; /* 允许内容溢出时滚动 */
    white-space: pre-wrap;
    font-size: 16px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 如果需要调整字体大小以适应内容，可以添加以下样式 */
#answerArea {
    font-size: 14px; /* 根据内容多少调整字体大小 */
}

/* 针对 #questionArea 和相关按钮的样式 */
.column {
    width: 100%;
    max-width: 800px; /* 限制最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 10px;
}

#questionArea {
    width: 98%;
    height: 120px; /* 根据需要调整高度 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #ffffff;
    margin-bottom: 10px; /* 添加底部边距 */
    resize: none; /* 禁止调整大小 */
    position: relative; /* 为绝对定位的按钮设置参考 */
}

/* 按钮容器样式，使其在 #questionArea 内水平居中并位于底部 */
.questionArea-buttons {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 5px; /* 按钮之间的间距 */
}

/* 按钮样式 */
.questionArea-buttons button {
    padding: 5px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

        .row::after {
            content: "";
            clear: both;
            display: table;
        }
        .header-container {
    display: flex;           /* 使用flex布局 */
    align-items: center;     /* 垂直居中对齐 */

    /* 可以根据需要添加其他样式，如padding等 */
}

        .box2 {
            background-color: #ffffff;
            width: 140px;
            height: 42px;
            border-radius: 7px;
            margin-right: 10px; /* 给文字和图标之间添加一些间距 */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            margin-top: 21px;
        }

        .chat {
            padding-left: 3px;
            padding-top: 0;
            color: #636a3f;
            font-size: 30px;
            position: relative;
        }

        body {
            background-color: #f6f5f5;
        }
        h2 {
            background-color: aqua;
            line-height: 1.5;
        }

        .zz {
            background-image:url(""); /* logo图片 */
            background-repeat: no-repeat; /* 背景图像不重复 */
            background-size: contain; /* 保持图像宽高比，适应元素宽度 */
            padding-left: 20px; /* 用来占据空间 */
        }
        .answer-container {
            position: relative; /* 相对定位 */
            padding: 10px;
            overflow: auto;
        }

        .question, .answer {
            position: absolute;
            right: 10px; /* 距离容器右边10px */
            margin: 0; /* 移除默认的外边距 */
        }

        .question {
            top: 0; /* 问题文本顶部对齐 */
        }

        .answer {
            bottom: 0; /* 回答文本底部对齐 */
        }
        .answer-row {
            display: flex;
            width: 100%;
            margin-bottom: 10px; /* 回答行之间的间距 */
        }

        .question-content, .answer-content {
            padding: 10px;
            margin-bottom: 8px; /* 问题和回答之间的垂直间距 */
            border-radius: 5px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 16px;
            box-sizing: border-box;
            width: 100%; /* 占满回答区域的宽度 */
        }

        .question-content {
            background-color: #f0f0f0;
            text-align: right; /* 问题文本靠右对齐 */
            margin-left: auto; /* 问题内容自动到回答区域的右侧 */
        }

        .answer-content {
            background-color: #e0e0e0;
            text-align: left; /* 回答文本靠左对齐 */
            margin-right: auto; /* 回答内容自动到回答区域的左侧 */
        }
        .button-container {
            display: flex;
            align-items: center;
            gap: 10px; /* 按钮之间的间距 */
        }

        /* 语音按钮样式 */
.voice-button {
    background-color: #97bfe7;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 5px;
}

.voice-button:hover {
    background-color: #64696d;
}
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="http://127.0.0.1:5000/">主页</a></li>
                <li><a href="http://127.0.0.1:5000/Practical%20Courses">实践课程</a></li>
                <li><a href="http://127.0.0.1:5000/One-on-one%20Tutoring">一对一辅导</a></li>
                <li><a onclick="displayPopup()">教学管理 </a></li>
                <li><a href="https://n1ks53vcj7t.feishu.cn/docx/R8GgdKk0io0DcRxPcTNckISnnNg?from=from_copylink" target="_blank">使用帮助</a></li>
                <li><a href="http://127.0.0.1:5000/About Us">关于我们</a></li>
                <li><a href="/login">登录</a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <div class="column">
             <div class="header-container">
            <h1 class="box2">智能回答</h1>
            <span class="iconfont chat">&#xe63a;</span>
        </div>
        </div>
        <div id="answerArea" class="column"></div>
        <div class="column">
            <textarea id="questionArea" placeholder="在这里提出你的问题..."></textarea><br>

                <button onclick="submitQuestion()">提交问题</button>
                <button class="voice-button" onclick="startVoiceRecognition()">
                    <i class="fas fa-microphone"></i>
                </button>
            </div>
        </div>
    </div>
    <footer>
        <p>&copy; 2024 星火编舟 SparkCodeVoyage</p>
    </footer>
    <script src="JS/index.js"></script>
    <script>
        function submitQuestion() {
            const questionArea = document.getElementById('questionArea').value;
            const answerArea = document.getElementById('answerArea');
            fetch('/ask2', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({questionArea: questionArea})
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data && data.answerArea) {
                    const questionText = document.createTextNode(questionArea);
                    const answerText = document.createTextNode(data.answerArea);
                    const questionDiv = document.createElement('div');
                    questionDiv.className = 'question-content';
                    questionDiv.appendChild(questionText);
                    const answerDiv = document.createElement('div');
                    answerDiv.className = 'answer-content';
                    answerDiv.appendChild(answerText);
                    answerArea.appendChild(questionDiv);
                    answerArea.appendChild(answerDiv);
                } else {
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'error-content';
                    const errorText = document.createTextNode('没有收到回答，请稍后再试。');
                    errorDiv.appendChild(errorText);
                    answerArea.appendChild(errorDiv);
                }
                document.getElementById('questionArea').value = '';
            })
            .catch(error => {
                console.error('Error:', error);
                const errorDiv = document.createElement('div');
                errorDiv.className = 'error-content';
                const errorText = document.createTextNode('请求失败，请稍后再试。');
                errorDiv.appendChild(errorText);
                answerArea.appendChild(errorDiv);
                document.getElementById('questionArea').value = '';
            });
        }

        function startVoiceRecognition() {
            if (!('webkitSpeechRecognition' in window)) {
                alert('您的浏览器不支持语音识别，请使用Chrome浏览器。');
                return;
            }
            const recognition = new webkitSpeechRecognition();
            recognition.lang = 'zh-CN';
            recognition.interimResults = false;
            recognition.maxAlternatives = 1;

            recognition.onresult = function(event) {
                const transcript = event.results[0][0].transcript;
                document.getElementById('questionArea').value = transcript;
            };

            recognition.onerror = function(event) {
                alert('语音识别出错：' + event.error);
            };

            recognition.start();
        }
    </script>
</body>
</html>